<template>
	<ul class="imgs" :style="{width: w+'%', height: h+'%', left: left+'%', top: top+'%'}">
		<li class="item" v-for="(item,i) in banner" :key="item.id">
			<img :src="item.img" />
		</li>
		<li class="item">
			<img :src="banner[0].img" />
		</li>
	</ul>
</template>

<script>
export default {
	props:{
		banner: {
			type: Array,
			required: true
		},
		dir: {
			type: String,
			default: 'left'
		}
	},
	data(){
		return {
			timer: '',
			left: 0,
			top: 0,
			w: 100,
			h: 100
		}
	},
	computed:{
		len(){
			return this.banner.length;
		}
	},
	methods:{
		autoPlay(){
			if (this.timer) return;
			let dir = this.dir;
			this.timer = setInterval(()=>{
				this[dir] -= .4;
				if(this[dir] <= -this.len*100) this[dir] = 0;
			}, 30)
		},
		autoStop(){
			clearInterval(this.timer);
			this[this.dir] = 0;
			this.timer = null;
		}
	},
	mounted(){
		if(this.dir == 'left'){
			this.w += this.len*100;
		}else{
			this.h += this.len*100;
		}
		setTimeout(()=>{
			this.autoPlay();
		},200)
	},
	destroyed(){
		this.autoStop();
	}
}
</script>

<style lang="less" scoped>
.imgs{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	.item{
		flex: 1;
		height: 100%;
		cursor: pointer;
		img{
			width: 100%;
			height: 100%;
		}
	}
}
</style>
